<template>
  <div class="cart-vant-list" v-if="carLists.length !== 0">
    <van-swipe-cell v-for="(item, index) in carLists" :key="index">
      <van-card
        :num="item.number"
        :price="item.retail_price"
        :title="item.goods_name"
        class="goods-card"
        :thumb="item.list_pic_url"
      >
      </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
      <!-- <div @click="btnClick(item, index)" class="check-box" :class="currentIndex == index ? 'actives' : ''"></div> -->
      <!-- <input class="check-box" type="checkbox" name="" id=""> -->
      <!-- <van-checkbox-group v-model="result"> -->
      <van-checkbox
        ref="checkbox"
       
        v-model="item.isChecked"
        >复选框</van-checkbox
      >
      <!-- </van-checkbox-group> -->
      <!-- <van-checkbox v-model="checked" ref="checkbox"> 复选框 </van-checkbox> -->
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  props: {
    carLists: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
      result: false,
    };
  },

  computed: {
    isAct
    // result() {

    // }
  },
  beforeUpdate() {
    console.log('hhh')
  },
  mounted() {
    // this.carLists.map((item) => {
    //   Object.assign(item, { isChecked: false });
    //   // console.log(this.carLists)
    // });
    // console.log('ahhh', this.carLists)
  },
  methods: {
    btnClick(item) {
      console.log(12);
      let index = this.carLists.findIndex((items) => items.id == item.id);
      this.currentIndex = index;
      // console.log(item.id, index);
      // 判断
      this.carLists[index].isChecked = !this.carLists[index].isChecked;
      console.log(item.isChecked, this.carLists, event);
      console.log(event);
    },
    changeClick(event) {
      console.log("变化了");
      console.log(event, event.target.spellcheck);
    },
    inputChange(event) {
      console.log("变化了2");
      console.log(event);
    },
  },
};
</script>

<style lang="scss" scoped>
.check-box {
  position: absolute;
  left: 11px;
  top: 43px;
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(~@/assets/icon/checkbox.png) no-repeat 0 -152px; // -152  -101活跃时图片
  background-size: 20px;
}
.cart-vant-list {
  margin-bottom: 80px;
}
div.actives {
  width: 20px;
  height: 20px;
  background: url(~@/assets/icon/checkbox.png) no-repeat 0 -101px; // -152  -101活跃时图片
  background-size: 20px;
}
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
</style>